<script lang="ts" setup>
import {onMounted, reactive, type UnwrapRef} from 'vue';
import {useRoute} from "vue-router";
import {getJobseekerDetailByJobseekerIdAPI} from "@/apis/jobseeker.ts";
import dayjs from "dayjs";

//表单数据
interface FormState {
  jobseekerId: string;
  jobseekerIsVerified: string,
  jobseekerStatus: string,
  jobseekerName: string,
  userAvatarUrl: string,
  jobseekerGender: string,
  jobseekerBirthdate: string,
  jobseekerEducationLevel: string,
  jobseekerMajor: string
}

const formState: UnwrapRef<FormState> = reactive({
  jobseekerId: '',
  jobseekerIsVerified: '',
  jobseekerStatus: '',
  jobseekerName: '',
  userAvatarUrl: '',
  jobseekerGender: '',
  jobseekerBirthdate: '',
  jobseekerEducationLevel: '',
  jobseekerMajor: ''
});


//接收参数
const route = useRoute();
//生命周期
onMounted(() => {
  formState.jobseekerId = route.params.jobseekerId as string;
  getJobseekerInfo()
})
//获取岗位信息
const getJobseekerInfo = async () => {
  if (formState.jobseekerId) {
    const res = await getJobseekerDetailByJobseekerIdAPI(formState.jobseekerId)
    if (res.data.flag) {
      formState.jobseekerIsVerified = res.data.data.jobseekerIsVerified
      formState.userAvatarUrl = res.data.data.userAvatarUrl
      formState.jobseekerStatus = res.data.data.jobseekerStatus
      formState.jobseekerName = res.data.data.jobseekerName
      formState.jobseekerGender = res.data.data.jobseekerGender
      formState.jobseekerBirthdate = dayjs(res.data.data.jobseekerBirthdate).format('YYYY-MM-DD')
      formState.jobseekerEducationLevel = res.data.data.jobseekerEducationLevel
      formState.jobseekerMajor = res.data.data.jobseekerMajor
    }
  }
}

//计算颜色
const Color = (colorType: string) => {
  switch (colorType) {
    case '已认证':
      return 'green';
    case '未认证':
      return 'red';
  }
}

</script>
<template>
  <div class="jobAndEmployerDetail">
    <div class="top">
      <a-page-header
          sub-title="求职者详情表单"
          title="返回"
          @back="() => $router.go(-1)"
      />
    </div>
    <div class="bottom">

      <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">求职者信息</a-divider>
      <a-badge-ribbon :color="Color(formState.jobseekerIsVerified)" :text="formState.jobseekerIsVerified">
        <div style="display: flex;padding-top: 30px">
          <div>
            <a-descriptions :title="formState.jobseekerName">
              <a-descriptions-item label="状态">{{ formState.jobseekerStatus }}</a-descriptions-item>
              <a-descriptions-item :span="2" label="性别">
                {{ formState.jobseekerGender }}
              </a-descriptions-item>
              <a-descriptions-item :span="3" label="生日">
                {{ formState.jobseekerBirthdate }}
              </a-descriptions-item>

              <a-descriptions-item :span="3" label="学历">
                {{ formState.jobseekerEducationLevel }}
              </a-descriptions-item>
              <a-descriptions-item :span="3" label="专业">
                {{ formState.jobseekerMajor }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div>
            <a-avatar
                :size="150"
                :src="'http://localhost:8080/image/download?name=' + formState.userAvatarUrl"
            />
          </div>
        </div>
      </a-badge-ribbon>
    </div>

  </div>
</template>

<style scoped>
.jobAndEmployerDetail {
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .top {
    border-bottom: 1px solid #ccc;
  }

  .bottom {
    padding: 10px 50px 50px;
  }
}


</style>
